<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    okText="审核通过"
    >
    
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
      
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="认证用户id">
          <a-input placeholder="请输入认证用户id" v-decorator="['userid', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="用户真实姓名">
          <a-input placeholder="请输入用户真实姓名" v-decorator="['realname', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="身份证号码">
          <a-input placeholder="请输入身份证号码" v-decorator="['idcardCode', {}]" />
        </a-form-item>

        <a-form-item label="身份证正面" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-upload
            listType="picture-card"
            class="headImg-uploader"
            :showUploadList="false"
            
            :data="{'isup':1}"
            :headers="headers"
            
          >
            <img v-if="IdcardFrontImg" :src="getIdcardFrontImgView()" alt="身份证正面" style="height:204px;max-width:400px"/>
          </a-upload>
        </a-form-item>



      <a-form-item label="身份证反面" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-upload
            listType="picture-card"
            class="headImg-uploader"
            :showUploadList="false"
            
            :data="{'isup':1}"
            :headers="headers"
            
          >
            <img v-if="IdcardBehindImg" :src="getIdcardBehindImgView()" alt="身份证反面" style="height:204px;max-width:400px"/>
          </a-upload>
        </a-form-item>

        <a-form-item label="营业执照" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-upload
            listType="picture-card"
            class="headImg-uploader"
            :showUploadList="false"
            
            :data="{'isup':1}"
            :headers="headers"
            
          >
            <img v-if="BusinesslicenseImg" :src="getBusinesslicenseImgView()" alt="营业执照" style="height:204px;max-width:400px"/>
          </a-upload>
        </a-form-item>

        

        <a-form-item label="授权书" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-upload
            listType="picture-card"
            class="headImg-uploader"
            :showUploadList="false"
            
            :data="{'isup':1}"
            :headers="headers"
            
          >
            <img v-if="Authorization" :src="getAuthorizationView()" alt="授权书" style="height:204px;max-width:400px"/>
          </a-upload>
        </a-form-item>


        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="企业名称">
          <a-input placeholder="请输入企业名称" v-decorator="['companyName', {}]" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="企业ID">
          <a-input placeholder="请输入企业ID" v-decorator="['comsumsId', {}]" />
        </a-form-item>




        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="用户职位">
          <a-input placeholder="请输入用户职位" v-decorator="['userPosition', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="联系方式">
          <a-input placeholder="请输入联系方式" v-decorator="['cphone', {}]" />
        </a-form-item>


        <a-form-item label="认证状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-decorator="[ 'authCheckStatus', {}]" placeholder="请选择认证状态">
            <a-select-option :value="1">认证中</a-select-option>
            <a-select-option :value="2">认证通过</a-select-option>
            <a-select-option :value="3">认证未通过</a-select-option>
          </a-select>
        </a-form-item>
        
        

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注：原因">
          <a-input placeholder="请输入备注：原因" v-decorator="['conment', {}]" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="创建时间">
          <a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'createTime', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="审核时间">
          <a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'checkTime', {}]" />
        </a-form-item>
		
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import Vue from 'vue'
  import { getAction } from '@/api/manage'
  import { disabledAuthFilter } from "@/utils/authFilter"
  import {duplicateCheck } from '@/api/api'
  import {frozenBatchCheckAuth} from '@/api/api'

  export default {
    name: "AuthInfoModal",
    data () {
      return {
        title:"操作",
        visible: false,
        Authorization: "",
        BusinesslicenseImg: "",
        IdcardBehindImg: "",
        IdcardFrontImg: "",
        model: {},
        
        headers:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
        },
        url: {
          imgerver: window._CONFIG['domianURL']+"/sys/common/view",
          add: "/authinfo/add",
          edit: "/authinfo/edit",
          check: "/authinfo/frozenBatchCheckAuth",
        },
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token};
      this.$emit('footer', false);
    },
    methods: {
      

      getIdcardFrontImgView(){
        return this.url.imgerver +"/"+ this.model.idcardFrontImg;
      },
      getIdcardBehindImgView(){
        return this.url.imgerver +"/"+ this.model.idcardBehindImg;
      },
      getBusinesslicenseImgView(){
        return this.url.imgerver +"/"+ this.model.businessLicenseImg;
      },
      getAuthorizationView(){
        return this.url.imgerver +"/"+ this.model.authorization;
      },


      add () {
          this.Authorization = "";
          this.IdcardBehindImg = "t";
          this.BusinesslicenseImg = "";
          this.IdcardFrontImg = "";
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();

        if(record.hasOwnProperty("id")){
          this.Authorization = "Has no pic url yet";
          this.IdcardBehindImg = "Has no pic url yet";
          this.BusinesslicenseImg = "Has no pic url yet";
          this.IdcardFrontImg = "Has no pic url yet";

        }
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'userid','realname','idcardCode','idcardBehindImg','idcardFrontImg','businessLicenseImg','companyName','userPosition','cphone','authorization','authCheckStatus','conment','comsumsId'))
		  //时间格式化
          this.form.setFieldsValue({checkTime:this.model.checkTime?moment(this.model.checkTime):null})
          this.form.setFieldsValue({createTime:this.model.createTime?moment(this.model.createTime):null})
        });

      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
      },

      handleOk: function () {
        let that = this;
        let id =this.model.id;
        let authCheckStatus= this.model.authCheckStatus;
        if(authCheckStatus!=1){
          that.$message.success("本次认证您已完成审核！！！不可再次操作！");
        }else{
          frozenBatchCheckAuth({ids: id, authCheckStatus: '2'}).then((res) => {
             if (res.success) {
                that.$message.success(res.message);
                location.reload();
             } else {
                that.$message.warning(res.message);
             }
          });
        }
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>